<template>
  <div class="financeEchart">
    <div id="main"></div>
  </div>
</template>

<script>
import { formatNum } from '@/utils/index'
import { mapGetters } from 'vuex'
const grid = {
    top: '40px',
    left: '40px',
    right: '40px',
    bottom: '20px',
    containLabel: true
  }
export default {
  name: 'FinanceEchart',
  props: {
    isSymol: String,
    qsXData: {
      type: Array,
      default: function() { return [] }
    },
    qsYData: Array,
    timeArray: Array
  },

  data() {
    return {
      dateEchart: undefined,
      yData: []
    }
  },
  mounted() {
    const el = document.getElementById('main')
    this.dateEchart = this.$echarts.init(el)
    window.addEventListener('resize', () => {
      if (this.dateEchart && this.dateEchart.resize) {
        this.dateEchart.resize()
      }
    })
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    opened() {
      return this.sidebar.opened
    },
    screenWidth() {
      return document.body.clientWidth
    }
  },
  watch: {
    qsXData: {
      immediate: true,
      deep: true,
      handler: function(newV, oldV) {
        this.qsXData = newV
        this.$nextTick(function() {
          this.initEchart(this.isSymol)
        })
      }
    },
    qsYData: {
      immediate: true,
      deep: true,
      handler: function(newV, oldV) {
       newV.forEach(item =>{
        this.yData.push({
          value:item[0],
          sf:item[1],
          ff: item[2]
        })
       })
        this.qsYData = newV
        this.$nextTick(function() {
          this.initEchart(this.isSymol)
        })
      }
    },
    opened() {
      if (this.dateEchart) {
        const that = this
        this.$nextTick(() => {
          if (this.dateEchart && this.dateEchart.resize) {
            setTimeout(() => {
              that.dateEchart.resize()
            }, 200)
          }
        })
      }
    },
    screenWidth: {
      immediate: true,
      deep: true,
      handler: function(newval) {
        return newval
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
  },
  methods: {
    initEchart(data) {
      this.dateEchart.setOption({
        grid,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.qsXData,
          axisLine: {
            lineStyle: {
              color: '#ccc' // x轴的颜色
            }
          }
        },
        graphic: {
          type: 'image',
          bottom: 86,
          right: 50,
          style: {
          // image: require('@/assets/images/base/logo.png'),
            position: 'absolute',
            width: 300
          }
        },
        yAxis: {
          type: 'value',
          data: this.yData,
          axisLine: {
            lineStyle: {
              color: '#ccc' // 折线的颜色
            }
          },
          axisLabel: {
            formatter: `${data}{value}`
            // formatter: function (name) {
            //       var index = 0;
            //       var clientlabels = ['十月','十一月','十二月','一月','二月','三月','四月']
            //       var clientcounts = [100000.23, 200000, 60000, 622220, 122250, 322210, 400002]
            //       clientlabels.forEach(function (value, i) {
            //         if (value == name) {
            //           index = i;
            //         }
            //       });
            //     return data + formatNum(clientcounts[index]);
            //     },
          }
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            smooth: true,
            showSymbol: false,
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.25, [{
            //     offset: 0,
            //     color: '#fff'
            //   }, {
            //     offset: 1,
            //     color: '#fff'
            //   }])
            // },
            itemStyle: {
              normal: {
                color: '#24BEBE',
                lineStyle: {
                  color: '#24BEBE'
                  // color: '#5B8BF7',
                }
              }

            }
          }
        ],
        tooltip: [{
          show: true,
          trigger: 'axis',
          textStyle: {
            color: '#ACB6C2',
            fontSize: '14'
          },
          formatter: function(params) {
            const str = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#24BEBE"></span>'+
            params[0].name  +
             '<span style="margin-left:5px">消耗：</span>' + data + formatNum(params[0].data.value.toFixed(2))
            return str
          }
          // triggerOn: 'mousemove|click',
          // backgroundColor: 'rgba(250, 250, 250, .8)',
          // shaowColor: 'rgba(0, 0, 0, .25)',
          // textStyle: {
          //   color: '#666',
          //   fontSize: '14px'
          // },
          // axiosPointer: {
          //   type: 'line',
          //   lineStyle: {
          //     type: 'solid',
          //     color: 'rgba(0, 0, 0, 0.25)'
          //   }
          // }
        }]
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.financeEchart{
  width:100%;
  height: 100%;
  position: relative;
  left: 0;
}
#main {
  box-sizing: border-box;
  margin-top: -40px;
  width: 100%;
  height: 350px;
//   margin-left: -50px;
}
</style>
